<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>景区信息编辑</title>
<%@include file="../header.jsp" %>
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/js/area-select.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xz4szxP9u9OLRajnZMger9GL"></script>

<!-- jquery fileupload -->
<script type="text/javascript" src="/js/vendor/jquery.ui.widget.js"></script>  
<script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>  
<script type="text/javascript" src="/js/jquery.fileupload.js"></script>
<link rel="stylesheet" href="/css/jquery.fileupload.css">
<!-- 实例化编辑器 -->
<script type="text/javascript">
	
	/* var ue1;
	var ue2;
	var ue3; */

    $(function() {
    	var ue1 = UE.getEditor('desc_editor',{initialFrameWidth:900});
    	var ue2 = UE.getEditor('traffic_editor',{initialFrameWidth:900});
    	var ue3 = UE.getEditor('prompt_editor',{initialFrameWidth:900});
    	//var ue2 = UE.getEditor('container');
    	
    	var isEdit = "${scene ne null}";
    	
    	$("#savebtn").click(function() {
    		/* var lis = $("#imgs").find("li");
    		console.info(lis);
    		$("#imgs").find("li").map(function(){
				return $(this).find("img").attr("src");
			}).get().join(",") */
			var form = $("#scene-form");
			var data = {
				"scenicSpot.name":form.find("input[name='name']").val(),
				"scenicSpot.key_words":form.find("input[name='keyWords']").val(),
				"scenicSpot.description":ue1.getContent(),
				"scenicSpot.dic_scenic_level":form.find("select[name='DictionaryId']").val(),
				"scenicSpot.dic_scenic_type":form.find("select[name='sceneType']").val(),
				"scenicSpot.sce_address":$("#fullAddress").val(),
				"scenicSpot.adm_div_id":getSelectAreaId(),
				"scenicSpot.open_time":form.find("input[name='open_time']").val(),
				"scenicSpot.close_time":form.find("input[name='close_time']").val(),
				"scenicSpot.transportation_info":ue2.getContent(),
				"scenicSpot.GPS_lat":$("#scene-form").find("input[name='GPS_lat']").val(),
				"scenicSpot.GPS_lng":$("#scene-form").find("input[name='GPS_lng']").val(),
				"scenicSpot.caution":ue3.getContent(),
				"scenicSpot.best_travel_time":form.find("input[name='best_travel_time']").val(),
				"scenicSpot.isOK":form.find("input[name='isOK']").val(),
				"imgs":$("#imgs").find("li").map(function(){
					return $(this).find("img").attr("src");
				}).get().join(","),
				"mainpic":$("input[name='mainpic']:checked").val()	
   			};
			var url = "/scene/add";
    		if(isEdit=='true') {
    			url = "/scene/update";
    			data["scenicSpot.scenic_id"] = "${scene.scenic_id}";
    		}
    		
    		var form = $("#scene-form");
    		$.ajax({
    			url:url,
    			type:"post",
    			data:data,
    			dataType:"json"
    		}).done(function(data){
    			alert(data.msg);
    			if(data.isSuccess) {
    				window.location = "/scene/list.htm";
    			}
    		}).fail(function(){
    			alert("保存失败！！");
    		})
    	})
    	
    	$(document).on("mouseenter", 'ul.gallery li', function () {
            $('img', this).fadeToggle(1000);
            $(this).find('.gallery-controls').remove();
            /* $(this).append('<div class="well gallery-controls">' +
                '<p><a href="javascript:;" class="gallery-delete btn"><i class="glyphicon glyphicon-remove"></i></a></p>' +
                '</div>'); */
            $(this).find('.gallery-controls').stop().animate({'margin-top': '-1'}, 400);
        });
        
      	$('.thumbnails').on('click', '.gallery-delete', function (e) {
            e.preventDefault();
            //get image id
            //alert($(this).parents('.thumbnail').attr('id'));
            //$(this).parents('.thumbnail').fadeOut();
            $(this).parents('.thumbnail').remove();
        });
      	
        $(document).on("mouseleave", 'ul.gallery li', function () {
            $('img', this).fadeToggle(1000);
            $(this).find('.gallery-controls').stop().animate({'margin-top': '-30'}, 200, function () {
                $(this).remove();
            });
        });
      
      	$("#ticket-img-upload").fileupload({  
    	    url:"/common/upload.htm",//文件上传地址，当然也可以直接写在input的data-url属性内  
    	    formData:{type:"ticket"},//如果需要额外添加参数可以在这里添加  
    	    done:function(e,data){  
    	        //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api  
    	        //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息  
    	        //返回的数据在result.result中，假设我们服务器返回了一个json对象  
    	        //console.log(JSON.stringify(result.result)); 
    	        var ret = eval("("+data.result+")");
    	        if(ret.isSuccess) {
    	        	var li = $("<li class='thumbnail'><a style='background:url(http://file.teziyou.com"+ret.json.url+");background-size:100px 100px;'><img"+
                    " class='grayscale' src='http://file.teziyou.com"+ret.json.url+"'></a><br><input type='radio' name='mainpic' onclick='chooseMainPic(this)'>主图&nbsp;&nbsp;"+
                    "<button onclick='delImg(this)' class='btn btn-primary btn-sm'>删除</button></li>");
    	        	var img = li.find("img");
    	        	img.height(100);img.width(100);
    	        	$(".thumbnails").append(li);
    	        } 
    	    }  
    	}) 
    	
    	var map;
    	var local;
    	
    	$("#getLoc").click(function() {
    		$("#add-div").hide();
    		$("#map-div").show();
    		var content = $("#baidu-map").html();
        	if(content==null||content=="") {
        		// 百度地图API功能
            	map = new BMap.Map("baidu-map");    // 创建Map实例
            	map.centerAndZoom("北京",15);      // 初始化地图,用城市名设置地图中心点
            	map.addControl(new BMap.NavigationControl());
            	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
            	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
            	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
            	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
            	
            	map.addEventListener("click",function(e){
        			$("#gpslng").text(e.point.lng.toFixed(3));
        			$("#gpslat").text(e.point.lat.toFixed(3));
        		});
            	
            	local = new BMap.LocalSearch(map, {
      			  renderOptions:{map: map}
      			});
            	
            	map.addEventListener("tilesloaded",function(){
            		location.href = "#map-top";
        		});
        	}
    	})
    	
    	$("#searchbtn").click(function(){
    		local.search($("#searchText").val());
    	})
    	
    	<c:if test="${scene ne null}">
    		editInit();
    	</c:if>
    })
    
    function returnEdit() {
		$("#add-div").show();
		$("#map-div").hide();
		$("#scene-form").find("input[name='GPS_lat']").val($("#gpslat").text());
		$("#scene-form").find("input[name='GPS_lng']").val($("#gpslng").text());
	}
    
    function delImg(button) {
    	$(button).parent().remove();
    }
    
    function chooseMainPic(input) {
    	$("input[name='mainpic']").val("");
    	var src = $(input).parent().find("img").attr("src");
    	$(input).val(src);
    }
    
    function editInit() {
    	var form = $("#scene-form");
    	form.find("input[name='name']").val("${scene.name}");
    	form.find("input[name='keyWords']").val("${scene.key_words}");
    	//ue1.setContent("${scene.description}");
    	form.find("select[name='sceneType']").val("${scene.dic_scenic_type}");
    	form.find("select[name='DictionaryId']").val("${scene.dic_scenic_level}");
    	$("#fullAddress").val("${scene.sce_address}");
    	form.find("input[name='open_time']").val("${scene.open_time}");
    	form.find("input[name='close_time']").val("${scene.close_time}");
    	//ue2.setContent("${scene.trafficInfo}");
    	form.find("input[name='GPS_lat']").val("${scene.GPS_lat}");
    	form.find("input[name='GPS_lng']").val("${scene.GPS_lng}");
    	//ue3.setContent("${scene.caution}");
    	form.find("input[name='best_travel_time']").val("${scene.best_travel_time}");
    	form.find("input[name='isOK'][value='${scene.isOK}']").attr("checked", "checked");
    	form.find("select[name='areaId']:eq(0)").val("${provinceId}");
    	form.find("select[name='areaId']:eq(1)").val("${cityId}");
    	form.find("select[name='areaId']:eq(2)").val("${scene.adm_div_id}");
    }
</script>
<style type="text/css">
.expand{width:100%;height:100%;}
html,body{margin:0px;height:100%;} 
</style>
</head>
<body>
<div id="add-div">
<jsp:include page="form.jsp"/>
</div>
<div id="map-div" class="expand" style="display:none;">
<jsp:include page="map.jsp"/>
</div>

</body>
</html>